<!--
 * @Author: Hzt
 * @Date: 2024-01-11 17:48:43
 * @LastEditTime: 2025-04-24 13:29:57
 * @LastEditors: Hzt
 * @Description: ***
 * @FilePath: \cty_admin\src\views\bill\bill\index.vue
-->
<template>
  <div class="main-page">
    <PageSearch :search-form-config="searchFormConfig" :form-data.sync="formData" @searchBtnClick="handleSearch" />
    <PageContent ref="pageContent" :form-data="formData" :content-table-config="contentConfig">
      <template #amount="{ row }">
        {{ row.amount }}元
      </template>
      <template #statusName="{ row }">
        {{
          row.status == 1
            ? "成功" : row.status == 2 ? "提现中" : row.status == -1 ? "提现失败" : row.status == 0 ? "未提现" : "未知"
        }}
      </template>
      <template #typeName="{ row }">
        {{
          row.type == 1 ? "周结账单" : row.type == 2 ? "日结账单" : row.type == 0 ? "月结账单" : "-"
        }}
      </template>

      <template #operate="{ row }">
        <el-button type="text" size="small" icon="el-icon-edit" @click="handleBill(row)">
          查看
        </el-button>
      </template>
    </PageContent>

    <el-drawer :visible.sync="drawer" title="账单明细" direction="rtl" size="50%" :before-close="handleClose">
      <div class="table-box">
        <PageContent ref="pageContent" :form-data="billData" :content-table-config="billConfig" style="height: 600px">
          <template #accountTime="{ row }">
            {{ row.accountTime | formatTime }}
          </template>
          <template #money="{ row }">
            {{ row.money }}元
          </template>
        </PageContent>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { billConfig } from "./config/bill.config";
import { searchFormConfig } from "./config/search.config";
export default {
  name: "MyBillDetail",
  filters: {
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  },
  data() {
    return {
      contentConfig,
      searchFormConfig,
      billConfig,
      formData: {},
      billData: {},
      drawer: false,
      direction: 'rtl',
      // tableData: [],
      // pageSize: 10,
      // pageNum: 1,
      // pageTotal: 0
    };
  },
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleBill(row) {
      console.log(row);
      this.billData = {
        status: row.status,
        type: row.type,
        billId: row.id,
      }
      this.billConfig.pageInfo.currentPage = 1;
      this.$nextTick(() => {
        this.$refs.pageContent.queryTblMain();
      });
      this.drawer = true;
    },
    handleClose(done) {
      done();
    },
  },
};
</script>

<style scoped>
.table-box {
  widows: calc(100% - 60px);
  padding: 30px;
}
</style>
